<template>
	<view :class="['text-hide', { 'sticky-top-after-titlebar': stickyAfterTitlebar && !hasContent }, extraClass || '']">
		<scroll-view v-if="scroll" class="bg-white w-full nowrap" :scroll-x="true" :scroll-left="scrollLeft">
			<view
				v-for="(el, i) in data"
				:key="i"
				class="text-center px-3-1 inline-block"
				:class="['scroll-item-' + i]"
				@click="selectTab(i)"
			>
				<view class="inline-flex flex-column items-center">
					<view class="inline-block py-2-2">
						<text
							class="color-secondary text-title"
							:class="[titleTextClass || '', i === activeIndex ? 'color-active font-semibold' : '']"
						>
							{{ el[titleKey] }}
						</text>
					</view>
					<view class="inline-block bg-active w-full" style="height: 2px" :class="{ hidden: i !== activeIndex }"></view>
				</view>
			</view>
		</scroll-view>
		<view
			v-else
			class="row-center bg-white"
			:class="{ 'sticky-top-after-titlebar': stickyAfterTitlebar && hasContent }"
		>
			<view
				v-for="(el, i) in data"
				:key="i"
				class="flex-1 text-center"
				:style="{ width: (1 / data.length) * 100 + '%' }"
				@click="selectTab(i)"
			>
				<!-- <view v-if="el.icon" class="text-center py-1-3" :class="[i === activeIndex ? 'bg-active' : 'bg-white']">
					<view>
						<text
							v-if="(i === activeIndex ? el.activeIcon : el.icon).indexOf('t-icon') >= 0"
							:class="['t-icon', i === activeIndex ? el.activeIcon : el.icon]"
						/>
						<text
							v-else
							:class="['iconfont', i === activeIndex ? el.activeIcon + ' color-white' : el.icon + ' color-secondary']"
						/>
					</view>
					<text class="text-xn" :class="[titleTextClass || '', i === activeIndex ? 'color-white' : 'color-secondary']">
						{{ el[titleKey] }}
					</text>
				</view> -->
				<view class="inline-flex flex-column items-center">
					<view class="inline-block py-2-2 row-center inline-flex">
						<sl-icon
							v-if="el.icon || el.activeIcon"
							class="mr-1-3"
							:name="i === activeIndex ? el.activeIcon : el.icon"
						/>
						<text
							class="color-secondary text-title"
							:class="[titleTextClass || '', i === activeIndex ? 'color-active font-semibold' : '']"
						>
							{{ el[titleKey] }}
						</text>
					</view>
					<view class="inline-block bg-active w-full" style="height: 2px" :class="{ hidden: i !== activeIndex }"></view>
				</view>
			</view>
		</view>
		<view v-if="hasContent">
			<view v-show="activeIndex === 0"> <slot name="tab0"></slot> </view>
			<view v-show="activeIndex === 1"> <slot name="tab1"></slot> </view>
			<view v-show="activeIndex === 2"> <slot name="tab2"></slot> </view>
			<view v-show="activeIndex === 3"> <slot name="tab3"></slot> </view>
			<view v-show="activeIndex === 4"> <slot name="tab4"></slot> </view>
		</view>
	</view>
</template>

<script>
import { ref, watch, getCurrentInstance } from 'vue';
export default {
	props: {
		data: {
			required: true,
			//{title,icon,activeIcon}
			type: Array,
		},
		titleKey: {
			default: 'title',
			type: String,
		},
		stickyAfterTitlebar: Boolean,
		extraClass: String,
		hasContent: {
			default: true,
			type: Boolean,
		},
		modelValue: {
			default: 0,
			type: Number,
		},
		scroll: Boolean,
		scrollTo: Object,
		titleTextClass: String,
	},
	setup(props, ctx) {
		const { ctx: curCtx } = getCurrentInstance();
		const activeIndex = ref(props.modelValue);
		watch(
			() => props.modelValue,
			(v) => {
				activeIndex.value = v;
			}
		);
		watch(activeIndex, (v) => {
			ctx.emit('update:modelValue', v);
		});
		function selectTab(index) {
			activeIndex.value = index;
			ctx.emit('change', index);
		}
		const scrollLeft = ref(0);
		watch(
			() => props.scrollTo,
			(val) => {
				if (val && props.scroll) {
					uni
						.createSelectorQuery()
						.in(curCtx)
						.select('.scroll-item-' + val.index)
						.boundingClientRect((data) => {
							if (data) {
								scrollLeft.value = data.left;
							}
						})
						.exec();
				}
			}
		);
		return {
			activeIndex,
			selectTab,
			scrollLeft,
		};
	},
};
</script>
